<template>
  <div class="app-container">
    <el-card shadow="never">
      <div slot="header" class="card-header">
        <span>租客账号管理</span>
      </div>

      <el-form :inline="true" :model="queryParams" class="filter-form" label-width="80px">
        <el-form-item label="手机号">
          <el-input
            v-model.trim="queryParams.phonenumber"
            placeholder="请输入手机号"
            size="mini"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input
            v-model.trim="queryParams.nickName"
            placeholder="请输入昵称"
            size="mini"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable size="mini">
            <el-option label="正常" value="0" />
            <el-option label="停用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" v-loading="loading" border stripe>
        <el-table-column prop="userId" label="用户ID" width="100" align="center" />
        <el-table-column prop="nickName" label="昵称" min-width="140" />
        <el-table-column prop="phonenumber" label="手机号" width="160" />
        <el-table-column prop="status" label="状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">{{ scope.row.status === '0' ? '正常' : '停用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间" width="180" />
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-view" @click="handleView(scope.row)">详情</el-button>
            <el-button
              type="text"
              size="mini"
              :icon="scope.row.status === '0' ? 'el-icon-close' : 'el-icon-check'"
              @click="toggleStatus(scope.row)"
            >{{ scope.row.status === '0' ? '停用' : '启用' }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-dialog title="租客详情" :visible.sync="detailVisible" width="720px" destroy-on-close>
      <el-descriptions v-if="detail.user" :column="2" border size="small">
        <el-descriptions-item label="用户ID">{{ detail.user.userId }}</el-descriptions-item>
        <el-descriptions-item label="账号">{{ detail.user.userName }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{ detail.user.nickName }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ detail.user.phonenumber }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="detail.user.status === '0' ? 'success' : 'danger'">
            {{ detail.user.status === '0' ? '正常' : '停用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ detail.user.createTime || '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">认证资料</el-divider>
      <el-descriptions v-if="detail.profile" :column="2" border size="small">
        <el-descriptions-item label="资料ID">{{ detail.profile.profileId }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ detail.profile.realName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ detail.profile.phone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="translateProfileType(detail.profile.status).type">
            {{ translateProfileType(detail.profile.status).label }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ detail.profile.auditRemark || '-' }}</el-descriptions-item>
      </el-descriptions>
      <div v-else class="empty-block">暂无资料</div>

      <el-divider content-position="left">上传附件</el-divider>
      <el-table v-if="detail.materials && detail.materials.length" :data="detail.materials" size="small" border>
        <el-table-column prop="fileName" label="文件名" min-width="200" show-overflow-tooltip />
        <el-table-column prop="bizType" label="类型" width="120" />
        <el-table-column prop="createTime" label="上传时间" width="180" />
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" :href="scope.row.fileUrl" target="_blank">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-else class="empty-block">暂无附件</div>
    </el-dialog>
  </div>
</template>

<script>
import { listTenant, getTenant, changeTenantStatus } from '@/api/system/tenant'

export default {
  name: 'TenantAccount',
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        phonenumber: undefined,
        nickName: undefined,
        status: undefined
      },
      detailVisible: false,
      detail: {
        user: null,
        profile: null,
        materials: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const res = await listTenant(this.queryParams)
        this.list = res.rows || []
        this.total = res.total || 0
      } finally {
        this.loading = false
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        phonenumber: undefined,
        nickName: undefined,
        status: undefined
      }
      this.getList()
    },
    async handleView(row) {
      const res = await getTenant(row.userId)
      const data = res.data || {}
      this.detail = {
        user: data.user || null,
        profile: data.profile || null,
        materials: data.materials || []
      }
      this.detailVisible = true
    },
    toggleStatus(row) {
      const targetStatus = row.status === '0' ? '1' : '0'
      this.$confirm(`确定要${targetStatus === '0' ? '启用' : '停用'}该租客账号吗？`, '提示', {
        type: 'warning'
      }).then(async () => {
        await changeTenantStatus(row.userId, targetStatus)
        this.$message.success('操作成功')
        this.getList()
      }).catch(() => {})
    },
    translateProfileType(status) {
      if (status === 'APPROVED') return { label: '已通过', type: 'success' }
      if (status === 'REJECTED') return { label: '已驳回', type: 'danger' }
      return { label: '待审核', type: 'info' }
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.filter-form {
  margin-bottom: 16px;
}
.empty-block {
  text-align: center;
  padding: 12px 0;
  color: #909399;
}
</style>
